<template>
  <div :class="className" :id="id" :style="{height:height,width:width}"/>
</template>

<script>
  import echarts from 'echarts'
  import resize from './mixins/resize'
  import {getCloudVideoStatistics} from "@/api/cloud/cloud_video"; // 数据接口
  import {getTenantId} from '@/utils/auth';

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      id: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '200px'
      },
      height: {
        type: String,
        default: '200px'
      },
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        chart: null,
        dateArray: [],
        dataArray: []
      }
    },
    mounted() {
      this.getData()
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      getData() {
        getCloudVideoStatistics(getTenantId()).then(response => {
          this.dateArray = response.data.dateArray;
          this.dataArray = response.data.dataArray;
          this.initChart();
        });
      },
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id))
        this.chart.setOption({
          backgroundColor: '#fff',
          title: {
            text: this.data.name,
            textStyle: {
              fontSize: 16
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none',
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          color: '#41a0f9',
          toolbox: {
            show: false,
            feature: {
              saveAsImage: {}
            },
            right: 20
          },
          grid: {
            top: 90,
            left: 0,
            right: 0,
            bottom: '2%',
            containLabel: true,
            height: '70%'
          },
          xAxis: [{
            type: 'category',
            boundaryGap: true,
            axisLine: {
              lineStyle: {
                color: '#f8f8f8'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa0a3',
              textStyle: {
                fontSize: 14
              }
            },
            data: this.dateArray
          }],
          yAxis: [{
            type: 'value',
            // name: '人数/人',
            nameGap: 55,
            nameTextStyle: {
              color: '#55585e',
              fontSize: 18
            },
            min: '0',
            // max: '250',
            splitNumber: 5,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                // color: '#57617B'
              }
            },
            axisLabel: {
              margin: 10,
              color: '#7a7a7c',
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#f8f8f8'
              }
            }
          }],
          series: [
            {
              name: '流量',
              type: 'bar',
              smooth: true,
              barWidth: '50%',
              data: this.dataArray
            }
          ]
        })
      }
    }
  }
</script>
